<?php
/*
 * @Author: 波波
 * @Date: 2025-06-29 17:20:09
 * @Email: guqule2@yeah.net
 * @LastEditors: 波波
 * @LastEditTime: 2025-07-07 22:58:49
 * @Description: 丸子社区-专注分享交流的社区平台，连接你我
 * @Company: 丸子社区
 */

/**
 * Category Template File
 *
 * @package WordPress
 * @subpackage wanzicms
 * @since 1.0.0
 */

get_header();
?>

<!-- 主内容区 -->
<main class="container mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-16 flex-grow">
    <!-- 面包屑导航 -->
    <div class="mb-8 animate-fade-in">
        <nav class="text-sm text-neutral-500">
            <a href="<?php echo esc_url(home_url('/')); ?>" class="hover:text-primary transition-colors">首页</a>
            <i class="fa fa-angle-right mx-2 text-xs"></i>
            <span class="text-neutral-700"><?php single_cat_title(); ?></span>
        </nav>
    </div>

    <!-- 栏目标题区域 -->
    <section class="mb-12 text-center animate-slide-up">
        <h1 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold text-neutral-800 mb-4"><?php single_cat_title(); ?></h1>
        <p class="text-[clamp(1rem,1.5vw,1.1rem)] text-neutral-600 max-w-3xl mx-auto"><?php echo category_description(); ?></p>
    </section>

    <!-- 子分类筛选 -->
    <?php
    $current_cat = get_queried_object();
    $child_cats = get_categories(array(
        'child_of' => $current_cat->term_id,
        'hide_empty' => true
    ));
    if ($child_cats) :
    ?>
        <section class="mb-10 animate-slide-up">
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <div class="flex flex-wrap gap-3">
                    <a href="<?php echo esc_url(get_category_link($current_cat->term_id)); ?>" class="px-4 py-2 rounded-full bg-primary text-white font-medium">全部</a>
                    <?php foreach ($child_cats as $child_cat) : ?>
                        <a href="<?php echo esc_url(get_category_link($child_cat->term_id)); ?>" class="px-4 py-2 rounded-full bg-neutral-100 text-neutral-700 font-medium hover:bg-primary/10 transition-colors">
                            <?php echo esc_html($child_cat->name); ?>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>
        </section>
    <?php endif; ?>

    <!-- 文章列表和侧边栏 -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
        <div class="lg:col-span-8">
            <?php if (have_posts()) :
                
                $list_style = wanzi_option('g_post_list_style', 'grid');
                $template_slug = 'content-' . $list_style;
                
                $container_class = 'grid grid-cols-1 md:grid-cols-2 gap-4';
                if ($list_style === 'list') {
                    $container_class = 'space-y-8';
                }
            ?>
                <!-- 文章列表 -->
                <div class="<?php echo esc_attr($container_class); ?>">
                    <?php while (have_posts()) : the_post();
                        get_template_part('template-parts/' . $template_slug);
                    endwhile; ?>
                </div>

                <!-- 分页 -->
                <div class="mt-12">
                    <?php
                    the_posts_pagination(array(
                        'mid_size'  => 2,
                        'prev_text' => __('<i class="fa fa-angle-left"></i>', 'wanzicms'),
                        'next_text' => __('<i class="fa fa-angle-right"></i>', 'wanzicms'),
                        'screen_reader_text' => __('文章导航'),
                    ));
                    ?>
                </div>

            <?php else : ?>
                <p class="text-center text-neutral-600 col-span-full">此分类下暂无文章。</p>
            <?php endif; ?>
        </div>

        <div class="lg:col-span-4">
            <?php include('sidebar.php'); ?>
        </div>
    </div>
</main>

<?php get_footer(); ?>